import React, { Component } from "react";
import "./PaymentSetting.scss";
import { Slider, Toast } from "antd-mobile";
import MainLayout from "../../../component/mainLayout/mainLayout";
import Button from "../../../component/button/index";
import yhTools from "../../../tools/yh";
import { ThemeLife } from "../../../tools/theme";
import { InterfaceG } from "../../../config/Config";
import XhbPayExp from "../../../component/xhbPayExp/index";

const Style = {
	trackStyle: {
		backgroundColor: ThemeLife.switch("#F82633", "#40B15D"),
		height: "4px"
	},
	railStyle: {
		backgroundColor: ThemeLife.switch("rgba(248,38,45,0.51)", "#a0d7af"),
		height: "4px"
	},
	handleStyle: {
		width: "28px",
		height: "28px",
		backgroundColor: ThemeLife.switch("#F82633", "#40B15D"),
		borderColor: ThemeLife.switch("#F82633", "#40B15D")
	}
};
class PaymentSetting extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isDisabled: true,
			userCode: "",
			list: [
				{
					title: "单次支付上限",
					value: 100,
					min: 100,
					max: 500,
					step: 100
				},
				{
					title: "单日支付上限",
					value: 100,
					min: 100,
					max: 1000,
					step: 500
				}
			]
		};
	}

	componentDidMount() {
		this.xhbPayUpperLimitQuery();
	}

	/** 查询支付上限 */
	async xhbPayUpperLimitQuery() {
		let objs = {
			url: InterfaceG.xhbPayUpperLimitQuery,
			params: {},
			_alertShow: false
		};
		Toast.loading("加载中...", 100);
		let res = await yhTools.request(objs);
		Toast.hide();
		if (res.code === "0") {
			let list = [...this.state.list];
			list[0].value = res.data.singleUpperLimit * 1;
			list[0].max = res.data.singleUpperLimitMax * 1;
			list[0].min = res.data.singleUpperLimitMin * 1;
			list[1].value = res.data.dailyUpperLimit * 1;
			list[1].max = res.data.dailyUpperLimitMax * 1;
			list[1].min = res.data.dailyUpperLimitMin * 1;
			this.setState({ list, id: res.data.id });
		} else {
			Toast.info(res.message, 2);
		}
	}
	/**修改支付上线 */
	async xhbPayUpperLimitUpdate() {
		let { id, list } = this.state;

		let objs = {
			url: InterfaceG.xhbPayUpperLimitUpdate,
			params: {
				singleUpperLimit: list[0].value,
				dailyUpperLimit: list[1].value
			},
			_alertShow: false
		};
		if (id) {
			objs.params.id = id;
		}
		Toast.loading("加载中...", 100);
		let res = await yhTools.request(objs);
		Toast.hide();
		if (res.code === "0") {
			Toast.info("保存成功", 2);
		} else {
			Toast.info(res.message, 2);
		}
	}

	onChange = (value, index) => {
		const list = [...this.state.list];
		if (value > list[index].max) {
			list[index].value = list[index].max;
		} else if (value < list[index].min) {
			list[index].value = list[index].min;
		} else {
			list[index].value = value;
		}

		this.setState({
			list,
			isDisabled: false
		});
	};
	render() {
		const _pageParams = {
			header: {
				title: "支付设置"
			},
			history: this.props.history
		};

		const { trackStyle, handleStyle, railStyle } = Style;
		const { list, isDisabled } = this.state;
		return (
			<div className="the-payment-setting">
				<MainLayout pageParams={_pageParams}>
					{list.map((item, index) => (
						<section
							className={`card ${index === list.length - 1 ? "no-border" : ""}`}
							key={index}
						>
							<p className="title">{item.title}</p>
							<p
								className="font-link"
								style={ThemeLife.switch({ color: "#F82633" }, {})}
							>
								<em>¥</em> {item.value}
							</p>
							<Slider
								className="range"
								trackStyle={trackStyle}
								railStyle={railStyle}
								handleStyle={handleStyle}
								defaultValue={item.value}
								value={item.value}
								min={item.min}
								max={item.max}
								step={item.step}
								onChange={value => this.onChange(value, index)}
							/>
							<footer className="card-footer">
								<span>¥ {item.min}</span>
								<span>¥ {item.max}</span>
							</footer>
						</section>
					))}
					<XhbPayExp />
					<Button
						style={{ marginTop: "33px" }}
						disabled={isDisabled}
						onClick={() => this.xhbPayUpperLimitUpdate()}
					>
						保存
					</Button>
				</MainLayout>
			</div>
		);
	}
}

export default PaymentSetting;
